<template>
  <div class="login-page">
    <div class="login-content">
      <div class="login-top">体系能力需求仿真软件</div>
      <div class="login-user">
        <el-form :model="loginForm" ref="form">
          <el-form-item
            prop="username"
            :rules="[
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur',
              },
            ]"
          >
            <el-input placeholder="请输入用户名" v-model="loginForm.username">
              <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[
              {
                required: true,
                message: '请输入密码',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              placeholder="请输入密码"
              show-password
              v-model="loginForm.password"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-btn">
        <el-button @click="login" type="primary">登录</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { userLogin } from "../../api/api";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          userLogin(this.loginForm)
            .then((res) => {
              if (res?.data?.code == 200) {
                localStorage.setItem(
                  "userInfo",
                  JSON.stringify(res.data?.data)
                );
                this.$router.push("/app");
              } else {
                this.$message.error(res?.data?.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.login-page {
  position: relative;
  text-align: left;
  padding: 24px;
  height: 100vh;
  width: 100vw;
  background: url("../../assets/img/bg.png") no-repeat;
  background-size: 100% 100%;
  .login-head {
    font-size: 48px;
    color: #000;
    font-size: 48px;
  }
  .login-content {
    width: 400px;
    padding: 24px 16px 48px 16px;
    position: absolute;
    right: 96px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
    .login-top {
      font-size: 24px;
      color: #000;
      font-weight: bold;
      padding-bottom: 16px;
    }
    .login-btn {
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
